require('styles/blog/BlogItem.css')

import React , {Component,PropTypes} from "react";

import {
  Card,
  CardHeader,
  CardMedia,
  CardTitle,
  CardText,
  IconButton
} from 'material-ui';
import IconMenu from 'material-ui/lib/menus/icon-menu';
import MenuItem from 'material-ui/lib/menus/menu-item';
import NavigationMoreVert from 'material-ui/lib/svg-icons/navigation/more-vert';
import EditorModeEdit from 'material-ui/lib/svg-icons/editor/mode-edit';
import ActionDelete from 'material-ui/lib/svg-icons/action/delete';
import SocialShare from 'material-ui/lib/svg-icons/social/share';

export default class BlogItem extends Component{
  static propTypes={
    blog:PropTypes.object.isRequired
  };

  static contextTypes={
    history: PropTypes.object.isRequired
  };

  constructor(props){
    super(props)
  }

  getStyles() {
    return {
      main:{
        width:'100%',
        minHeight:'100px',
        margin: '30px 40px 30px 40px',
        position: 'relative',
        border: '1px solid #ddd',
        background: '#fff',
        maxWidth: '900px',
     }
    };
  }

  render(){
    const styles = this.getStyles();
    return (
      <div style={styles.main}>
        <Card>
          <BlogItemHeader {...this.props}/>
          <BlogItemBody {...this.props}/>
        </Card>
      </div>
    );
  }
}

class BlogItemHeader extends Component{
  static contextTypes={
    history: PropTypes.object.isRequired
  };
  constructor(props){
    super(props)
  }

  doDeleteBlog(){
    const {blog,deleteBlog}=this.props;
    deleteBlog(blog);
  }

  getStyles() {
    return {
      card: {
        position: 'relative',
        marginTop: 10,
        marginBottom: 20
      },
      iconMenu: {
        position: 'absolute',
        top: 12,
        right: 16,
        zIndex: 5
      }
    };
  }

  render(){
    const { history } = this.context;
    const {blog}=this.props;
    const styles = this.getStyles();
    return (
      <CardHeader title={blog.title}
                  avatar={blog.avatar}>
        <IconMenu style={styles.iconMenu}
                  iconButtonElement={
                    <IconButton><NavigationMoreVert /></IconButton>
                  }>
          <MenuItem leftIcon={<EditorModeEdit />} primaryText='Edit'
            onTouchTap={() => {
              history.pushState(null, `/blog/${blog.id}/edit`);
            }}/>
          <MenuItem leftIcon={<ActionDelete />} primaryText='Remove'
                    onTouchTap={this.doDeleteBlog.bind(this)}/>
        </IconMenu>
      </CardHeader>
    );
  }
}

class BlogItemBody extends Component{
  constructor(props){
    super(props)
  }

  getStyles() {
    return {
      cardMedia: {
        marginTop: 20,
        background: 'black',
        minHeight: 100
      },
      cardMediaStyle: {
        maxHeight: '500px',
        textAlign: 'center'
      },
      cardMediaImage: {
        maxHeight: '500px',
        maxWidth: '100%'
      }
    };
  }

  render(){
    const {blog}=this.props;
    const styles=this.getStyles();
    return (
      <div>
        <CardMedia style={styles.cardMedia}
                   mediaStyle={styles.cardMediaStyle}
                   overlay={<CardTitle title={blog.title} subtitle={blog.subtitle}/>}>
          <div>
            <img style={styles.cardMediaImage} src={blog.poster}/>
          </div>
        </CardMedia>
        { blog.body ? <CardText>{blog.body}</CardText> : '' }
      </div>
    );
  }
}
